<template>
  <transition name="fade">
    <div v-if="loading" class="global-loader flex flex-col gap-4 select-none">
      <img width="100" src="https://cd.sealmg.com/assets/img/loading.gif" alt="Loading animation" title="Please wait while loading" lazy="loading" />
      <div></div>
      <!-- height="166" -->
      <!-- <h1>Loading...</h1> -->
    </div>
  </transition>
</template>
<script>
  export default {
    data() {
      return {
        loading: true
      }
    },
    created() {
      if (!process.client) return
      // 监听页面加载完成事件

      // if (document.readyState === 'complete') {
      //   this.finish()
      //   return
      // }
      // document.onreadystatechange = () => {
      //   if (document.readyState === 'complete') {
      //     this.finish()
      //   }
      // }
    },
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>
<style scoped>
  .global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999999;
    /* overflow: hidden; */
  }
  /* 渐入渐出动画 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>
